<template>
  <view>{{ title }}</view>
  <view>计数器:{{ counter.count }}</view>
  <button @click="counter.increment">我是 +1</button>
  <view
    >名字:{{ user.userInfo?.name ?? "暂无数据" }}, 年龄:{{
      user.userInfo?.age ?? "暂无数据"
    }}</view
  >
  <button @click="onModifyUserInfo">修改用户信息</button>
  <button @click="onClearUserInfo">清除用户信息</button>
</template>

<script setup lang="ts">
import { useCounter } from "@/stores/counter";
import { useUserInfoStore } from "@/stores/user";
import { onLoad } from "@dcloudio/uni-app";
import { ref, watch } from "vue";

const title = ref("我是标题");

const counter = useCounter();
const user = useUserInfoStore();

function onModifyUserInfo() {
  user.setUserInfo({ name: "李四", age: 66 });
}

function onClearUserInfo() {
  user.clearUserInfo();
}

watch(
  title,
  () => {
    console.log("new title:", title);
  },
  {
    deep: true,
  }
);

onLoad(() => {
  setTimeout(() => {
    title.value = "哈哈哈哈";
  }, 2000);
});
</script>

<style>
</style>
